<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="http://woshijingshenbing.com">
  <title>Markdown使用手册 | Codreamer的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="个人博客第一篇文章，用 Markdown 写的，尽管有点小麻烦，但慢慢就会熟悉起来的，这里把常用方法做一个总结。">
<meta property="og:type" content="article">
<meta property="og:title" content="Markdown使用手册">
<meta property="og:url" content="http://woshijingshenbing.com/2015/06/03/Markdown使用手册/index.html">
<meta property="og:site_name" content="Codreamer的博客">
<meta property="og:description" content="个人博客第一篇文章，用 Markdown 写的，尽管有点小麻烦，但慢慢就会熟悉起来的，这里把常用方法做一个总结。">
<meta property="og:updated_time" content="2016-12-21T05:49:59.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Markdown使用手册">
<meta name="twitter:description" content="个人博客第一篇文章，用 Markdown 写的，尽管有点小麻烦，但慢慢就会熟悉起来的，这里把常用方法做一个总结。">
  
    <link rel="alternative" href="/atom.xml" title="Codreamer的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

  
<script>
var _hmt = _hmt || [];
(function() {
	var hm = document.createElement("script");
	hm.src = "https://hm.baidu.com/hm.js?45db6f44750c33b1afd7970532c8b3fb";
	var s = document.getElementsByTagName("script")[0]; 
	s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="/img/avatar.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Codreamer</a></h1>
		</hgroup>

		
		<p class="header-subtitle">除非你改变了交往的人和阅读的书，否则，你的五年之后和现在完全一样</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/photos">相册</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
    			
    			
            
    			
    			<a data-idx="2" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/sniperyen" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/ddhj" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="qq" target="_blank" href="/871757525" title="qq"><i class="icon-qq"></i></a>
		        
					<a class="mail" target="_blank" href="mailto:871757525@qq.com" title="mail"><i class="icon-mail"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Codreamer</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="/img/avatar.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Codreamer</h1>
			</hgroup>
			
			<p class="header-subtitle">除非你改变了交往的人和阅读的书，否则，你的五年之后和现在完全一样</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/photos">相册</a></li>
		        
		        
		        	<li><a href="/archives/">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/sniperyen" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/ddhj" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="qq" target="_blank" href="/871757525" title="qq"><i class="icon-qq"></i></a>
			        
						<a class="mail" target="_blank" href="mailto:871757525@qq.com" title="mail"><i class="icon-mail"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="post-Markdown使用手册" class="article article-type-post " itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Markdown使用手册
    </h1>
  

        <a href="/2015/06/03/Markdown使用手册/" class="archive-article-date">
  	<time datetime="2015-06-03T02:11:12.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2015-06-03</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>个人博客第一篇文章，用 Markdown 写的，尽管有点小麻烦，但慢慢就会熟悉起来的，这里把常用方法做一个总结。</p>
<a id="more"></a>
<h3 id="首行缩进"><a href="#首行缩进" class="headerlink" title="首行缩进"></a>首行缩进</h3><p>在段首加入<code>&amp;ensp;</code>来输入一个空格.加入<code>&amp;emsp;</code> <code>&amp;emsp;</code>来输入两个空格。</p>
<h3 id="插入代码"><a href="#插入代码" class="headerlink" title="插入代码"></a>插入代码</h3><ul>
<li>在代码两侧加入一个反引号 ` (单行代码)</li>
<li>在代码两侧添加三个反引号 ``` （多行代码）</li>
<li>反引号最好在代码的前后行添加，而不是直接加在代码两边</li>
<li>添加空行可以结束先前的格式状态。建议在改变格式时，均添加一个空行。</li>
</ul>
<h3 id="代码区块"><a href="#代码区块" class="headerlink" title="代码区块"></a>代码区块</h3><p>以原来的样子来展示：缩进四个空格，一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）</p>
<h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><ul>
<li>用 <code>*</code> 来代表无序列表</li>
<li>直接在文字前加1. 2. 3. <em>符号要和文字之间加上一个字符的空格</em></li>
<li>如果列表项目间用空行分开，在输出 HTML 时 Markdown 就会将项目内容用 <code>&lt;p&gt;</code> 标签包起来</li>
<li>列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符</li>
<li>如果要在列表项目内放进引用，那 <code>&gt;</code> 就需要缩进</li>
<li>如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符</li>
</ul>
<h3 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h3><p>在文本前加入 <code>&gt;</code> 这种尖括号（大于号）</p>
<h3 id="链接（图片）"><a href="#链接（图片）" class="headerlink" title="链接（图片）"></a>链接（图片）</h3><p>插入链接与插入图片的语法很像，区别在一个 ! 号。到目前为止， Markdown 还没有办法指定图片的宽高，<br>如果你需要的话，你可以使用普通的 <code>&lt;img&gt;</code> 标签。</p>
<ul>
<li>图片：<code>![]()</code></li>
<li>链接：<code>[]()</code>  </li>
</ul>
<h4 id="参考式链接"><a href="#参考式链接" class="headerlink" title="参考式链接"></a>参考式链接</h4><pre><code>I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3].
[1]: http://google.com/        &quot;Google&quot;
[2]: http://search.yahoo.com/  &quot;Yahoo Search&quot;
[3]: http://search.msn.com/    &quot;MSN Search&quot;
</code></pre><p>如果改成用链接名称的方式写：</p>
<pre><code>I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

[google]: http://google.com/        &quot;Google&quot;
[yahoo]:  http://search.yahoo.com/  &quot;Yahoo Search&quot;
[msn]:    http://search.msn.com/    &quot;MSN Search&quot;
</code></pre><h4 id="行内式链接：-不建议使用"><a href="#行内式链接：-不建议使用" class="headerlink" title="行内式链接：(不建议使用)"></a>行内式链接：(不建议使用)</h4><pre><code>I get 10 times more traffic from [Google](http://google.com/ &quot;Google&quot;)
than from [Yahoo](http://search.yahoo.com/ &quot;Yahoo Search&quot;) or
[MSN](http://search.msn.com/ &quot;MSN Search&quot;).
</code></pre><h3 id="粗体和斜体"><a href="#粗体和斜体" class="headerlink" title="粗体和斜体"></a>粗体和斜体</h3><ul>
<li>用两个 <code>*</code> 包含一段文本就是 <strong>粗体</strong> 的语法，用一个 <code>*</code> 包含一段文本就是 <em>斜体</em> 的语法</li>
<li>如果你的 * 和 _ 两边都有空白的话，它们就只会被当成普通的符号</li>
<li>如果要在文字前后直接插入普通的星号或底线，你可以用反斜线</li>
</ul>
<h3 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h3><p>用三个 <code>*</code> 或者 <code>_</code>来表示， 不过建议用一整行 <code>_</code> 来表示，易于辨识</p>
<h3 id="插入表格"><a href="#插入表格" class="headerlink" title="插入表格"></a>插入表格</h3><p>目前编辑器不支持表格，以往是通过截图，呈现的效果并不好，Markdown支持html，所以我们可以用html来写表格。<br>但是用html写表格，实在太麻烦了，这里有个简单的转换方法，<br>参考<a href="http://pressbin.com/tools/excel_to_html_table/index.html" target="_blank" rel="external">Markdown之表格的处理</a></p>
<h3 id="兼容-HTML"><a href="#兼容-HTML" class="headerlink" title="兼容 HTML"></a>兼容 HTML</h3><p>HTML 是一种发布的格式，Markdown 是一种书写的格式。不在 Markdown 涵盖范围之内的标签，<br>都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。</p>
<p>要制约的只有一些 HTML 区块元素――比如 <code>&lt;div&gt;</code>、<code>&lt;table&gt;</code>、<code>&lt;pre&gt;</code>、<code>&lt;p&gt;</code> 等标签，<br>必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。<br>Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的 <code>&lt;p&gt;</code> 标签。</p>
<p>例子如下，在 Markdown 文件里加上一段 HTML 表格：</p>
<pre><code>这是一个普通段落。
&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
这是另一个普通段落。
</code></pre><p>请注意，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如，你在 HTML 区块内使用 Markdown 样式的<code>*强调*</code>会没有效果。</p>
<p>HTML 的区段（行内）标签如 <code>&lt;span&gt;</code>、<code>&lt;cite&gt;</code>、<code>&lt;del&gt;</code> 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的 <code>&lt;a&gt;</code> 或 <code>&lt;img&gt;</code> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法。</p>
<p>和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。</p>
<h3 id="特殊字符自动转换"><a href="#特殊字符自动转换" class="headerlink" title="特殊字符自动转换"></a>特殊字符自动转换</h3><p>在 HTML 文件中，有两个字符需要特殊处理： &lt; 和 &amp; 。 &lt; 符号用于起始标签，&amp; 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 <code>&amp;lt;</code> 和 <code>&amp;amp;</code> </p>
<p><code>4 &lt; 5</code> </p>
<p>Markdown 将会把它转换为： </p>
<p><code>4 &amp;lt; 5</code> </p>
<p>不过需要注意的是，code 范围内，不论是行内还是区块， &lt; 和 &amp; 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 &lt; 和 &amp; 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）</p>
<h3 id="换行"><a href="#换行" class="headerlink" title="换行"></a>换行</h3><p>Markdown 允许段落内的强迫换行（插入换行符），如果你确实想要依赖 Markdown 来插入 <code>&lt;br /&gt;</code> 标签的话，在插入处先按入两个以上的空格然后回车。</p>
<h3 id="反斜杠"><a href="#反斜杠" class="headerlink" title="反斜杠"></a>反斜杠</h3><p>Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">\   反斜线</div><div class="line">`   反引号</div><div class="line"><span class="bullet">*   </span>星号</div><div class="line">_   底线</div><div class="line">&#123;&#125;  花括号</div><div class="line">[]  方括号</div><div class="line">()  括弧</div><div class="line"><span class="section">#   井字号</span></div><div class="line"><span class="bullet">+   </span>加号</div><div class="line"><span class="bullet">-   </span>减号</div><div class="line">.   英文句点</div><div class="line">!   惊叹号</div></pre></td></tr></table></figure>
<h3 id="参考连接"><a href="#参考连接" class="headerlink" title="参考连接"></a>参考连接</h3><ul>
<li><a href="http://wowubuntu.com/markdown/" target="_blank" rel="external">Markdown 语法说明 (简体中文版)</a></li>
</ul>

      

      
        <div class="page-reward">
          <a href="javascript:;" class="page-reward-btn tooltip-top">
            <div class="tooltip tooltip-east">
            <span class="tooltip-item">
              赏
            </span>
            <span class="tooltip-content">
              <span class="tooltip-text">
                <span class="tooltip-inner">
                  <p class="reward-p"><i class="icon icon-quo-left"></i>谢谢你请我吃糖果<i class="icon icon-quo-right"></i></p>
                  <div class="reward-box">
                    
                    <div class="reward-box-item">
                      <img class="reward-img" src="/img/pay-alipay.png">
                      <span class="reward-type">支付宝</span>
                    </div>
                    
                    
                    <div class="reward-box-item">
                      <img class="reward-img" src="/img/pay-wechat.png">
                      <span class="reward-type">微信</span>
                    </div>
                    
                  </div>
                </span>
              </span>
            </span>
          </div>
          </a>
        </div>
      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Markdown/">Markdown</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/技术/">技术</a>
	</div>


      

      
        
<div class="share-btn share-icons tooltip-left">
  <div class="tooltip tooltip-east">
    <span class="tooltip-item">
      <a href="javascript:;" class="share-sns share-outer">
        <i class="icon icon-share"></i>
      </a>
    </span>
    <span class="tooltip-content">
      <div class="share-wrap">
        <div class="share-icons">
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="icon icon-weibo"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="icon icon-weixin"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="icon icon-qq"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="icon icon-douban"></i>
          </a>
          <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a>
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="icon icon-facebook"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="icon icon-twitter"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="icon icon-google"></i>
          </a>
        </div>
      </div>
    </span>
  </div>
</div>

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="http://s.jiathis.com/qrcode.php?url=http://woshijingshenbing.com/2015/06/03/Markdown使用手册/" alt="微信分享二维码">
    </div>
</div>

<div class="mask js-mask"></div>
      
      <div class="clearfix"></div>
    </div>
  </div>
</article>

  
<nav id="article-nav">
  
    <a href="/2015/10/07/HTTP知识点总结/" id="article-nav-newer" class="article-nav-link-wrap">
      <i class="icon-circle-left"></i>
      <div class="article-nav-title">
        
          HTTP知识点总结
        
      </div>
    </a>
  
  
</nav>






<div class="duoshuo">
	<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="Markdown使用手册" data-title="Markdown使用手册" data-url="http://woshijingshenbing.com/2015/06/03/Markdown使用手册/"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"woshijingshenbing"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
	<!-- 多说公共JS代码 end -->
</div>





          </div>
        </div>
      </div>
      <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Codreamer
    	</div>
      	<div class="footer-right">
      	<span id="busuanzi_container_site_uv">
          本站访客数<span id="busuanzi_value_site_uv"></span>人次
        </span>
      	</div>
    </div>
  </div>
</footer>

    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">Git</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">http</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">MongoDB</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">Markdown</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">Mysql</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">VIM</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">定时任务</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">mac</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">hexo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">nodejs</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">pycharm</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">随记</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">游记</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">马尔代夫</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">买房</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">北京</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">python</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">并发</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">线程</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">进程</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">协程</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">设计模式</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    
    	<section class="tools-section tools-section-friends" q-show="friends">
  		
        <ul class="search-ul">
          
            <li class="search-li">
              <a href="https://www.v2ex.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>v2ex</a>
            </li>
          
            <li class="search-li">
              <a href="http://weavesilk.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>weavesilk</a>
            </li>
          
        </ul>
  		
    	</section>
    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">他真诚地将自己的挑剔,&lt;br /&gt;误认为是对美的不懈追求，&lt;br /&gt;把自己的孤僻,&lt;br /&gt;误认为是不食人间烟火，&lt;br /&gt;把自己的散漫,&lt;br /&gt;误认为是对于自由的热爱。&lt;br /&gt;&lt;br /&gt;他的思想因为追求风雅而变得庸俗起来，&lt;br /&gt;他的行为因为小心翼翼而变得放纵不羁。&lt;br /&gt;&lt;br /&gt;他有很强的责任感，&lt;br /&gt;却也因此害怕做出承诺。&lt;br /&gt;&lt;br /&gt;他批判世上的所有东西，&lt;br /&gt;包括他自己。&lt;br /&gt;&lt;br /&gt;当别人指出他的自相矛盾后，&lt;br /&gt;他无法自圆其说，&lt;br /&gt;于是只好沉默。&lt;br /&gt;&lt;br /&gt;他是个不可理喻的人。</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>